<!--主题分类选择-->
<script setup>
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";
import {ArrowDown, Lock} from "@element-plus/icons-vue";
import {ElementUtils} from "@/assets/js/ElementUtils";


const emit = defineEmits(['command']);
const props = defineProps({
  forumId: {type: Number,},
})
const store = useStore();
const options = ref([]);
const list = (fid, force) => {
  if (!fid) return
  const loading = ElementUtils.loading({target: "#top_key_dropdown",});
  return store.dispatch("Post/topicKeyList", {fid, force}).then(res => {
    options.value = res;
    // console.log(res)
  }).catch(ElementUtils.exceptionHandler).finally(() => {
    loading.close()
  });
}
const {forumId,} = toRefs(props)

onMounted(() => {
  list(forumId.value)
})

watch(forumId, (nv) => {
  list(nv)
})

</script>

<template>
  <el-dropdown id="top_key_dropdown" :max-height="300" @command="emit('command',$event)">
    <span class="el-dropdown-link">
      <el-button>
        主题分类
        <el-icon>
          <arrow-down/>
        </el-icon>
      </el-button>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in options" :command="item.name">
          <el-icon v-if="item.setByModerator">
            <Lock/>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>